<template>
    <div class="checkbox-list-group">
        <van-cell-group>
            <van-cell v-for="(item, index) in list" clickable :key="index" :title="`${index + 1}. ${item.content}`"
                @click="checkInfo(item);">
                <template v-if="!isReadonly" #right-icon>
                    <van-checkbox :checked="getItemCheck(item)" :name="item" ref="checkboxes" />
                </template>
            </van-cell>
            <van-cell v-if="!isReadonly" :title="`其他`" clickable @click="otherCheckInfo();">
                <template #right-icon>
                    <van-checkbox :checked="isOther" name="其他" ref="checkboxes" />
                </template>
            </van-cell>
            <!-- <van-cell v-if="!list || list.length <= 0" :title="`无`"></van-cell>
            <template v-else>
                <van-cell v-if="!isReadonly" :title="`${list.length + 1}. 其他`" clickable @click="otherCheckInfo();">
                    <template #right-icon>
                        <van-checkbox :checked="isOther" name="其他" ref="checkboxes" />
                    </template>
                </van-cell>
            </template> -->
        </van-cell-group>
    </div>

    <van-cell-group v-if="isOther && !isReadonly" inset>
        <van-field style="border:2px solid var(--wait-tip-border-bg-color);" class="r5" v-model="checkOtherInfoValue"
            rows="3" autosize label="其他" label-width="34px" type="textarea" maxlength="120"
            :placeholder="otherTextPlaceholder" show-word-limit />
    </van-cell-group>
</template>

<script lang="ts">

export default {
    props: {
        list: Array,
        checkInfo: Array,
        checkOtherInfo: String,
        otherTextPlaceholder: {
            type: String,
            default: '请输入其他原因'
        },
        isMultiple: Boolean,
        itemKey: {
            type: String,
            default: 'id'
        },
        isOtherCheck: Boolean,
        isReadonly: Boolean,
    },
    data() {
        return {
            checkValue: [] as any[],
            isOther: false,
        }
    },
    emits: ['update:checkInfo', 'update:checkOtherInfo', 'update:isCheckOther'],
    computed: {
        checkInfoValue: {
            get(): unknown[] {
                return this.checkInfo || [];
            },
            set(val: unknown[]) {
                this.$emit('update:checkInfo', this.isMultiple ? val : [val[val.length - 1]]);
            }
        },
        checkOtherValue: {
            get(): boolean {
                return this.isOtherCheck;
            },
            set(val: boolean) {
                this.$emit('update:isCheckOther', val);
            }
        },
        checkOtherInfoValue: {
            get(): string | undefined {
                return this.checkOtherInfo;
            },
            set(val: string | undefined) {
                this.$emit('update:checkOtherInfo', val);
            }
        }
    },
    methods: {
        /**
         * 选中其他
         */
        otherCheckInfo() {
            this.checkInfoValue = [];
            this.isOther = !this.isOther;
            this.checkOtherValue = this.isOther;
        },
        getItemCheck(item: any | string) {
            if (typeof item === 'string') {
                return this.checkInfoValue.includes(item);
            }
            return this.checkInfoValue.map((li: any) => li && li[this.itemKey]).includes(item[this.itemKey]);
        },
        checkInfo(item: any) {
            this.isOther = false;
            this.checkOtherValue = this.isOther;
            if (this.getItemCheck(item)) {
                this.checkValue = this.checkValue.filter(li => li[this.itemKey] != item[this.itemKey]);
            } else {
                this.checkValue.push(item);
            }
            this.checkInfoValue = this.checkValue;
        }
    },
    created() {
        this.checkValue = [];
    }
}
</script>

<style scoped></style>